<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search flex space-between">
			<div>
				
			</div>

			<el-button size="default" type="primary" @click="addFun()">新增</el-button>
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;">

				<el-table :data="state.tableData.data" border style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column label="序号" type="index" width="100" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column label="病区" prop="hospitalArea.name"  min-width="100" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column label="病床" prop="number"  min-width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column label="操作" width="150"  fixed="right" align="center">
						<template #default="scope">
              <el-button v-if="scope.row.isDisable == 0" size="small" link type="primary" style="color: red;" @click="changeIsDisable(scope.row.id,1)">禁用</el-button>
              <el-button v-else size="small" link type="primary" @click="changeIsDisable(scope.row.id,0)">启用</el-button>

              <el-button v-if="scope.row.isHidden == 0" size="small" link type="primary" style="color: red;" @click="changeIsHidden(scope.row.id,1)">隐藏</el-button>
              <el-button v-else size="small" link type="primary" @click="changeIsHidden(scope.row.id,0)">显示</el-button>
						</template>
					</el-table-column>
				</el-table>


				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>

			</el-card>
		</div>

		
	</div>
</template>

<script setup name="bedManage">
import { getCurrentInstance } from 'vue';
import { systemApi } from '/@/api/system/index';
import { ElMessageBox, ElMessage } from 'element-plus';
import { toolsApi } from '/@/api/tools'
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));


// 定义变量内容
const DetailDialogRef = ref()
const state = reactive({
	apiData: {
		page: 1,
		pageSize: 10,
		search: '',
		departmentId: ''
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
});

// 页面加载时
onMounted(() => {
	getList()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 130 - 47 + "px";
});



const changeIsDisable = (id, val) => {
	const apiData = {
		ids: [id],
	}
  if(val === 1){ // 禁用
    systemApi().disableBed(apiData).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }else{
    systemApi().enableBed(apiData).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }
	
}

const changeIsHidden = (id, val) => {
	const apiData = {
		ids: [id],
	}
  if(val === 1){ // 隐藏
    systemApi().hideBed(apiData).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }else{
    systemApi().showBed(apiData).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  }
	
}



// 获取列表
const getList = () => {
	state.tableData.loading = true
	systemApi().bedList(state.apiData).then(res => {
    state.tableData.total = res.data.total
		state.tableData.loading = false
		state.tableData.data = res.data.items
	}).catch(() => {
		state.tableData.loading = false
	})

}



const addFun = () => {
	DetailDialogRef.value.openDialog();
}



// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.pageSize = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};


</script>

<style lang="scss" scoped>
.page-main {
	height: calc(100vh - 50px - 106px);
}
</style>
